<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="<%=basePath%>" />
		<title>添加用户</title>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=7" />
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="expires" content="0" />

		<style type="text/css">
label {
	width: 10em;
}

input.error {
	border: 1px solid red;
	width: auto;
}

label.error {
	font-size: 12px;
	color: red;
}
</style>

		<link id="editCss" rel="stylesheet" type="text/css"
			href="<%=path %>/css/style.css" />
		<link id="editCss" rel="stylesheet" type="text/css"
			href="<%=path%>/css/right.css" />

		<script src="<%=path%>/js/jquery.js" type="text/javascript"></script>
		<script src="<%=path%>/js/jquery.validate.js" type="text/javascript"></script>

		<!-- validate begin  -->
		<script type="text/javascript">
	   function sel(){
           if($('#company').selectedIndex == '0'){
						alert("company");
						return  false;
               } else if($('#userRole').selectedIndex =='0'){
					alert("userRole");
					return  false;
         		  }
           }
       
    $( function(){
               $("#addUserForm").validate({
             rules:{ userID: {
                                        required:true,
                                        
                                        maxlength:8
                          }, userName: {
                                        required:true,
                                       
                                        maxlength:30
                          }, password:{
                                required:true,
                                minlength:3,
                                maxlength:18
                          }, re_password:{  
                              equalTo: "#password"  
                          } , contactEmail:{
                                email:true,
							    required:true
                          }
                    }, messages:{
                    				userID: {required:"请输入ID!" },
                                    userName:{ required:"请填写真实姓名!" },
									contactEmail:{ required:"请填写邮箱!",email:"邮箱格式错误!" },
									password:{ required:"请填写密码!" },
									re_password:{equalTo:"重复密码不一致!" }
                           },submitHandler: function(form) {
                        	     if($("#company")[0].options[$("#company")[0].selectedIndex].value == '0'){
             						alert("请选择所属公司");
             						return  false;
                            } else if($("#userRole")[0].options[$("#userRole")[0].selectedIndex].value =='0'){
             					alert("请选择用户角色");
             					return  false;
                      		  }else{
                      			doVali();
                      			if(isOkVali()==true){
                      				form.submit();
                          			}
								  }
                                }
                    }); });	
	</script>
		<!-- validate end  -->


		<script type="text/javascript">
       
    	function isOkVali(){
    			if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
    				if(xmlHttpRequest.responseText=="ok"){
    				$("#showVali").text("可以使用");
    				return true;
    				}else if(xmlHttpRequest.responseText=="isExsit"){
    			   $("#showVali").html("<FONT STYLE='color:red;'>ID被占用</FONT>");
    			   return false;
    				}else{
    					$("#showVali").text("Connected Failed");
    					return false; 	
    				   }
    				}
    			}
		
    	function doVali(){
    		var val=$("#userID");
    		if(val!=null&&$.trim( val.val()).length>=3){
    		var reg = /[\u4e00-\u9fa5]/; 
    			 if(reg.test(val.val())){
    				 	alert("id不能含有中文。");
    				 	val.focus();
    				 	return false ;
    				 }else{
    					var url ="<%=path%>/servlet/AddServlet?key=isExistUser&userId="+val.val();
    		 if (window.XMLHttpRequest) {   
    	        　　 xmlHttpRequest = new XMLHttpRequest();   
    	        　　 }else if (window.ActiveXObject) {   
    	        　　  xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");   
    	        　　 }   
    	        　　 if(xmlHttpRequest){   
    				        		xmlHttpRequest.open("post",url,false);
    				        		xmlHttpRequest.onreadystatechange=isOkVali;
    				        		xmlHttpRequest.send(null);
    	        　　 }   }
     	        }else{
						alert("ID不正确");
						val.focus();
						return ;
 	    	        }	}

     

        function checkAdd(){
        	var userId = document.addUserForm.userID.value;//用户id
        	var userName = document.addUserForm.userName.value;//用户名
        	var company = document.addUserForm.company.value;//所属公司
        	var password = document.addUserForm.password.value;//密码
        	var re_password = document.addUserForm.re_password.value;//再次输入密码
        	var userRole = document.addUserForm.userRole.value;//用户所属角色
        	var contactEmail = document.addUserForm.contactEmail.value;//email地址
        	var emailNotifications = document.addUserForm.emailNotifications_c;//是否接收邮件通知
        	if(emailNotifications.checked){
        		document.addUserForm.emailNotifications.value = 1;
        	}else{
        		document.addUserForm.emailNotifications.value = 0;
        	}
        	return true;
        }
    </script>
	</head>

	<body class="bg">

		<div id="nav" class="crumbs">
			当前位置：用户管理 > 添加用户
		</div>

		<div class="search ctitle">
			<div class="tab">
				<span class="right"></span>
				<span class="font-blue14pxb">添加用户</span>
			</div>
		</div>

		<div class="tableBox fwidth">
			<form id="addUserForm" name="addUserForm" method="post"
				action="<%=path%>/servlet/AddServlet" onsubmit=" checkAdd();">
				<input type="hidden" name="key" id="key" value="user" />
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<th class="h" style="width: 30%;">
							登录ID
						</th>
						<td class="text_left">
							<input id="userID" name="userID" type="text" value=""
								style=" width: 150px; color: #325f86;"
								onblur="doVali()" />
							<span id="showVali" style="color: #325f86;"></span>
						</td>

					</tr>
					<tr>
						<th class="h">
							用户名称
						</th>
						<td class="text_left">
							<input name="userName" type="text" value=""
								style=" width: 150px; color: #325f86;" />
						</td>
					</tr>
					<tr>
						<th class="h">
							用户类型
						</th>
						<td class="text_left">
							普通用户：<input name="userType" type="radio" value="C" style="color: #325f86;"/>
							监控管理员：<input name="userType" type="radio" value="M"
								style="color: #325f86;" />
						</td>
					</tr>
					<tr>
						<th class="h">
							所属公司
						</th>
						<td class="text_left">
							<select id="company" name="company"
								style=" width: 150px; color: #325f86;">
								<option value="0">
									请选择
								</option>
								<c:if test="${cusList!=null }">
									<c:forEach var="cus" items="${cusList}">
										<option value="${cus.customerID}">
											${cus.company}
										</option>
									</c:forEach>
								</c:if>
							</select>
						</td>
					</tr>
					<tr>
						<th class="h">
							输入密码
						</th>
						<td class="text_left">
							<input id="password" name="password" type="password" value=""
								style=" width: 150px; color: #325f86;"
								autocomplete="off" />
						</td>
					</tr>

					<tr>
						<th class="h">
							再次输入密码
						</th>
						<td class="text_left">
							<input id="re_password" name="re_password" type="password"
								value=""
								style=" width: 150px; color: #325f86;" />
						</td>
					</tr>

					<tr>
						<th class="h">
							用户角色
						</th>
						<td class="text_left">
							<select id="userRole" name="userRole"
								style=" width: 150px; color: #325f86;">
								<option value="0">
									请选择
								</option>
								<c:if test="${roleList!=null }">
									<c:forEach var="role" items="${roleList}">
										<option value="${role.roleID}">
											${role.name}
										</option>
									</c:forEach>
								</c:if>
							</select>

						</td>
					</tr>

					<tr>
						<th class="h">
							Email地址
						</th>
						<td class="text_left">
							<input name="contactEmail" type="text" value=""
								style=" width: 150px; color: #325f86;" />
						</td>
					</tr>
					<tr>

						<th class="h">
							是否接收邮件通知
						</th>
						<td class="text_left">
							<input type="hidden" name="emailNotifications"
								id="emailNotifications" />
							<input name="emailNotifications_c" type="checkbox" value="1"
								style="color: #325f86;" />
						</td>
					</tr>

					<tr class="footer">
						<td colspan="2" align="center">
							<input type="submit" name="save" value="添 加" class="button" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>
